<template>
  <div id="app">
    <layout-page>
      <div id="nav">
        <section
          class="btn"
          :class="[`btn${i}`, selIndex === i ? 'sel-btn' : '']"
          v-for="(it, i) in routesList"
          :key="i"
          @click="handleRoute(i)"
        >
          <router-link :to="it.path">{{ it.label }}</router-link>
        </section>
      </div>
      <router-view />
    </layout-page>
  </div>
</template>
<script>
import LayoutPage from './components/LayoutPage.vue'
export default {
  name: 'App',
  data () {
    return {
      routesList: [
        {
          label: '泛光建组群',
          path: '/'
        },
        {
          label: '拉伸区域组',
          path: '/map3d'
        },
        {
          label: '待定2',
          path: '/daiding2'
        },
        {
          label: '待定1',
          path: '/daiding1'
        },
        {
          label: '待定0',
          path: '/daiding0'
        }
      ],
      selIndex: parseInt(localStorage.getItem('index')) ?? 0
    }
  },
  components: {
    LayoutPage
  },
  methods: {
    handleRoute (i) {
      localStorage.setItem('index', i)
      this.selIndex = parseInt(localStorage.getItem('index'))
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: hidden;
  // background: #222;
}

#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 30px;
  color: #ffffff;
  .btn {
    width: 200px;
    height: 48px;
    // background: url("./assets/images/gc06.png");
    a {
      line-height: 48px;
      font-size: 18px;
      font-family: HuXiaoBo-NanShen;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);
      background: linear-gradient(0deg, #ffffff 0%, #83a9ff 99.6826171875%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .btn1,
  .btn3 {
    transform: rotateZ(180deg);
    a {
      display: inline-block;
      transform: rotateZ(-180deg);
    }
  }
  .sel-btn {
    // background: url("./assets/images/gc05.png");
    color: #ffffff;
    text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);
    background: linear-gradient(0deg, #ffffff 0%, #88e70d 99.6826171875%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
